import AnimatedSection from '../components/shared/AnimatedSection'
import Card from '../components/shared/Card'
import Button from '../components/shared/Button'
import { FiArrowRight } from 'react-icons/fi'

const products = [
  {
    id: 1,
    name: 'Product One',
    description: 'A powerful solution for modern teams with advanced features.',
    image: 'https://images.pexels.com/photos/5081918/pexels-photo-5081918.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2',
    category: 'Premium'
  },
  {
    id: 2,
    name: 'Product Two',
    description: 'Streamlined interface with essential tools for everyday use.',
    image: 'https://images.pexels.com/photos/5082577/pexels-photo-5082577.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2',
    category: 'Standard'
  },
  {
    id: 3,
    name: 'Product Three',
    description: 'Specialized tools for professional creative workflows.',
    image: 'https://images.pexels.com/photos/5082582/pexels-photo-5082582.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2',
    category: 'Premium'
  },
  {
    id: 4,
    name: 'Product Four',
    description: 'Entry-level solution with core capabilities for small teams.',
    image: 'https://images.pexels.com/photos/5076531/pexels-photo-5076531.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2',
    category: 'Basic'
  },
  {
    id: 5,
    name: 'Product Five',
    description: 'Advanced analytics platform with powerful insights.',
    image: 'https://images.pexels.com/photos/5076516/pexels-photo-5076516.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2',
    category: 'Premium'
  },
  {
    id: 6,
    name: 'Product Six',
    description: 'Collaborative workspaces designed for remote teams.',
    image: 'https://images.pexels.com/photos/5075898/pexels-photo-5075898.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2',
    category: 'Standard'
  }
]

function Products() {
  return (
    <div className="pb-12">
      {/* Hero Section */}
      <section className="pt-32 md:pt-40 pb-16">
        <div className="container-custom">
          <AnimatedSection direction="none">
            <h1 className="text-4xl md:text-5xl font-medium text-secondary-900 dark:text-white mb-6 text-center">
              Our Products
            </h1>
            <p className="text-lg md:text-xl text-secondary-600 dark:text-secondary-300 max-w-3xl mx-auto text-center mb-8">
              Discover our range of beautifully designed products that combine cutting-edge technology with exceptional user experience.
            </p>
          </AnimatedSection>
        </div>
      </section>

      {/* Product Grid */}
      <section className="py-12">
        <div className="container-custom">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {products.map((product, index) => (
              <AnimatedSection key={product.id} delay={0.1 * index}>
                <Card className="h-full overflow-hidden flex flex-col" interactive>
                  <div className="aspect-w-16 aspect-h-9 overflow-hidden">
                    <img 
                      src={product.image} 
                      alt={product.name} 
                      className="w-full h-64 object-cover object-center"
                    />
                  </div>
                  <div className="p-6 flex flex-col flex-grow">
                    <div className="mb-4">
                      <span className="inline-block px-3 py-1 text-xs font-medium bg-primary-100 dark:bg-primary-900/30 text-primary-600 dark:text-primary-400 rounded-full">
                        {product.category}
                      </span>
                    </div>
                    <h3 className="text-xl font-medium text-secondary-900 dark:text-white mb-2">
                      {product.name}
                    </h3>
                    <p className="text-secondary-600 dark:text-secondary-400 mb-4 flex-grow">
                      {product.description}
                    </p>
                    <Button variant="outline" className="mt-auto flex items-center">
                      Learn more <FiArrowRight className="ml-2" />
                    </Button>
                  </div>
                </Card>
              </AnimatedSection>
            ))}
          </div>
        </div>
      </section>

      {/* Comparison Section */}
      <section className="py-16 bg-secondary-50 dark:bg-secondary-900/50">
        <div className="container-custom">
          <AnimatedSection direction="none">
            <div className="text-center mb-12">
              <h2 className="text-3xl md:text-4xl font-medium text-secondary-900 dark:text-white mb-4">
                Product Comparison
              </h2>
              <p className="text-lg text-secondary-600 dark:text-secondary-300 max-w-3xl mx-auto">
                Find the perfect solution for your specific needs
              </p>
            </div>
          </AnimatedSection>

          <AnimatedSection delay={0.2}>
            <div className="overflow-x-auto">
              <table className="w-full rounded-apple bg-white dark:bg-secondary-800 shadow-apple dark:shadow-apple-dark overflow-hidden">
                <thead>
                  <tr className="bg-secondary-50 dark:bg-secondary-700">
                    <th className="px-6 py-4 text-left text-secondary-900 dark:text-white">Features</th>
                    <th className="px-6 py-4 text-center text-secondary-900 dark:text-white">Basic</th>
                    <th className="px-6 py-4 text-center text-secondary-900 dark:text-white">Standard</th>
                    <th className="px-6 py-4 text-center text-secondary-900 dark:text-white">Premium</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-secondary-100 dark:divide-secondary-700">
                  {[
                    { feature: 'Core functionality', basic: true, standard: true, premium: true },
                    { feature: 'Advanced analytics', basic: false, standard: true, premium: true },
                    { feature: 'Collaborative features', basic: false, standard: true, premium: true },
                    { feature: 'API access', basic: false, standard: false, premium: true },
                    { feature: 'Priority support', basic: false, standard: false, premium: true },
                    { feature: 'Custom integrations', basic: false, standard: false, premium: true },
                  ].map((row, index) => (
                    <tr key={index} className="hover:bg-secondary-50 dark:hover:bg-secondary-700/50 transition-colors">
                      <td className="px-6 py-4 text-secondary-900 dark:text-white">{row.feature}</td>
                      <td className="px-6 py-4 text-center">
                        {row.basic ? (
                          <span className="text-success-500">✓</span>
                        ) : (
                          <span className="text-error-500">×</span>
                        )}
                      </td>
                      <td className="px-6 py-4 text-center">
                        {row.standard ? (
                          <span className="text-success-500">✓</span>
                        ) : (
                          <span className="text-error-500">×</span>
                        )}
                      </td>
                      <td className="px-6 py-4 text-center">
                        {row.premium ? (
                          <span className="text-success-500">✓</span>
                        ) : (
                          <span className="text-error-500">×</span>
                        )}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </AnimatedSection>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-16">
        <div className="container-custom">
          <AnimatedSection direction="up">
            <div className="bg-primary-500 rounded-apple p-10 md:p-16 text-center relative overflow-hidden">
              <div className="absolute inset-0 bg-gradient-to-tr from-primary-600 to-primary-400 z-0"></div>
              <div className="relative z-10">
                <h2 className="text-3xl md:text-4xl font-medium text-white mb-6">
                  Ready to find your perfect solution?
                </h2>
                <p className="text-white/90 text-lg max-w-2xl mx-auto mb-8">
                  Our team is ready to help you choose the right product for your unique needs and guide you through the setup process.
                </p>
                <div className="flex flex-col sm:flex-row justify-center gap-4">
                  <Button variant="secondary" size="lg">Contact Sales</Button>
                  <Button className="bg-white text-primary-500 hover:bg-white/90" size="lg">Schedule Demo</Button>
                </div>
              </div>
            </div>
          </AnimatedSection>
        </div>
      </section>
    </div>
  )
}

export default Products